<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TZ-追梦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box,#wrap{
             width: 150px;
             height: 300px;
             border:1px dashed black;
             text-align: center;
             line-height: 300px;
         }
        #box{
            float: left;
        }
        #wrap{
            float: right;
        }
    </style>
</head>
<body>
    <div id="box" draggable="true">拖拽元素</div>
    <div id="wrap">目标元素</div>
    <script>
        var n = 0;
        box.ondragstart = function () {
            this.style.background = 'gray';
        };
        box.ondrag = function () {
            //document.title = n++;
        };
        box.ondragend = function () {
            this.style.background = '';
        };

        wrap.ondragenter = function () {
            this.style.cssText = 'background:black;color:blue';

        };
        wrap.ondragover = function(e){
            var e = e || event;
            e.preventDefault();
            document.title = n++;
        };
        wrap.ondragleave = function () {
            this.style.cssText = '';
        };
        wrap.ondrop = function () {
            this.innerHTML = '释放鼠标了';
            alert(1);
        };
    </script>
</body>
</html>